<template>
    <div>
        <div v-for="(item,index) in theModel"
             :key="index">
            <div v-if="item.Children&&item.Children.length>0">
                <div class="content"
                     @click="openChild(item)">
                    <span class="name">
                        {{item.DeptName}}
                    </span>
                    <x-icon type="ios-arrow-down"
                            size="30"
                            v-if="item.open"></x-icon>
                    <x-icon type="ios-arrow-right"
                            size="30"
                            v-if="!item.open"></x-icon>
                </div>
                <div v-show="item.open"
                     class="child-nav">
                    <div v-for="(navItem,j) in item.Children"
                         :key="j">
                        <list v-if="(navItem instanceof Array)"
                              :theModel="navItem"
                              :openChild="openChild"
                              :selectedFn="selectedFn"></list>
                        <ul class="user-list"
                            v-else>
                            <li @click="selectedFn(navItem)">
                                <label>{{navItem.DeptName}}</label>
                                <icon v-if="navItem.checked"
                                      type="success-no-circle"></icon>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul v-show="item.open"
                class="user-list"
                v-else>
                <li @click="selectedFn(item)">
                    <label>{{item.DeptName}}</label>
                    <icon v-if="item.checked"
                          type="success-no-circle"></icon>
                </li>
            </ul>
            <!-- <ul v-show="item.open"
                class="user-list"
                v-else>
                <li v-for="(childItem,i) in item.Children"
                    :key="i"
                    @click="selectedFn(childItem)">
                    <label>{{childItem.DeptName}}</label>
                    <icon v-if="childItem.checked"
                          type="success-no-circle"></icon>
                </li>
            </ul> -->
        </div>
    </div>
</template>
<script>
import { Icon } from 'vux'
export default {
    name: 'list',
    props: {
        theModel: {
            default: () => []
        },
        selectedFn: {

        },
        openChild: {

        }
    },
    components: {
        Icon
    }
}
</script>
<style scoped>
.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.name {
    line-height: 24px;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #333;
}
.user-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 20px;
    color: #999;
    font-size: 14px;
    padding: 10px 10px 10px 0;
    margin-left: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.user-list li label {
    width: 300px;
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
}
.user-list ul li:last-child {
    padding-bottom: 0;
}
.child-nav {
    padding-left: 10px;
}
</style>
